<template>
    <div class="content">
        <el-card>
            <el-form ref="form" :model="form" :rules="rules" label-width="100px">
                <el-form-item label="课程名称:" prop="name">
                    <el-input v-model="form.name" placeholder="请输入课程名称"></el-input>
                </el-form-item>
                <el-form-item label="课程分类:" prop="category">
                    <el-cascader
                        placeholder="请选择课程分类"
                        style="width: 440px"
                        v-model="form.category"
                        :options="categoryList"
                        @change="handleChange">
                    </el-cascader>
                </el-form-item>
                <el-form-item label="课程售价:">
                    <el-input-number
                        v-model="form.price"
                        :min="1"
                        :max="999999"
                        :step="1"
                        :precision="2"
                    ></el-input-number>
                </el-form-item>
                <el-form-item label="课程讲师:" prop="lecturer">
                    <el-select v-model="form.lecturer" placeholder="请选择课程讲师">
                        <el-option v-for="item in lecturerList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="课程封面:">
                    <Upload ref="uploadFile" :upload-list="form.courseUrl" @uplaodFile="uploadFile" @removeFile="removeFile"></Upload>
                </el-form-item>

                <el-form-item>
                    <el-input style="width: 440px" maxlength="1000" show-word-limit type="textarea"
                              v-model="form.desc" placeholder="请输入课程简介"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit('form')"> 保存</el-button>
                    <el-button @click="$router.back()">取消</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>


<script>
import Upload from '@/components/Upload.vue';

export default{
    components:{
        Upload
    }, 
    data(){
        return{
            form: {
                id: '',
                name: '',
                code: '',
                lecturer: '',
                category: '',
                price: '',
                desc: '',
                courseUrl: ''
            },
            categoryList: [
                {
                    value: '1001',
                    label: '前端',
                    children: [
                        { value: "100101", label: "html5" },
                        { value: "100102", label: "vue" },
                        { value: "100103", label: "node" },
                        { value: "100104", label: "react" },
                        { value: "100105", label: "javascript" }
                    ]
                },
                {
                    value: "1002",
                    label: "后端",
                    children: [
                        { value: "100201", label: "springboot" },
                        { value: "100202", label: "微服务" },
                        { value: "100203", label: "Redis" },
                    ],
                },
                {
                    value: "1003",
                    label: "移动端",
                    children: [
                        { value: "100301", label: "iOS" },
                        { value: "100302", label: "Android" },
                        { value: "100303", label: "Flutter" },
                    ]
                }
            ],
            lecturerList: [
                { id: 101, name: '尤羽西'},
                { id: 102, name: 'JKenan'},
                { id: 103, name: '奥里给'}
            ],

            rules: {
                name: [
                    {
                        required: true,
                        message: "请输入课程名称",
                        trigger: "blur"
                    }
                ],
                category: [
                    {
                        required: true,
                        message: "请选择课程分类",
                        trigger: "change"
                    }
                ],
                lecturer: [
                    {
                        required: true,
                        message: "请选择课程讲师",
                        trigger: "change"
                    }
                ],
                desc: [
                    {
                        required: true,
                        message: "请输入课程简介",
                        trigger: "blur"
                    }
                ]
            }
        }
    },

    create(){
        this.getCourseCategory()
        if(this.$route.query.id){
            this.getCourseDetail()
        }
    },

    methods: {
        async getCourseDetail(){
            const { data: res } = await this.$axios.get('/course/detail')
            if(res.success){
                Objiect.assign(this.form, res.data)
            }
        },

        async getCourseCategory() {
            const result = await this.$axios.get("/course/getCouserCategory")
            if(result.data.success){
                this.categoryList - result.data.data
            }else{
                this.$message.error(result.data.message)
            }
        },

        // 新增/编辑 课程内容
        onSubmit(formName) {
        this.$refs[formName].validate((valid) => {
            if (valid) {
            let url = this.form.id ? "/course/update" : "/course/save";
            this.$axios.post(url, this.form).then((res) => {
                if (res.data.success) {
                this.$message.success("保存成功！");
                this.$router.go(-1);
                } else {
                this.$message.error(res.data.msg);
                }
            });
            } else {
            return false;
            }
        });
        },

        uploadFile(file){
            this.form.courseUrl.push(file)
        },

        removeFile(id){
            let fileIds = this.form.courseUrl
            var index = fileIds.findINdex( (item) => {
                if(item.id = id){
                    return true
                }
                if(index != -1){
                    fileIds.splice(index,1)
                }
            })
        }
    }
    
}

</script>


<style>
.el-card{
    margin-top: 20px;
}
.el-input,
.el-select {
  width: 440px;
}

</style>